<template>
	<view class="warp">
		<top-nav title="验证助记词"></top-nav>
		<view class="title">
			请按顺序点击助记词，<br>确保您已正确备份
		</view>
		<view class="content">
			<view class="list" v-for="(item,index) in list" :class="index==10||index==11||index==9?'noborder':''">
				<view class="info">{{item}}</view>
			</view>
		</view>
		<view class="button-wrap">
			<view class="list" v-for="(item,index) in buttonList" @click="selectFun(item,index)" :class="item.selected==1?'selected':''">{{item.value}}</view>
		</view>
		<view class="bottom">
			<my-button @clickFun="clickFun">确定</my-button>
		</view>
		<u-modal v-model="requireShow" :content="requireContent"></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import topNav from 'components/top-nav/top-vue.vue';
	import button from './components/button.vue'
	export default{
		data(){
			return{
				requireShow:false,
				requireContent:'',
				inputClass:{
					color:'#ffffff',
					fontSize: '36rpx'
				},
				list:[],
				buttonList:[{
					value:'qwer',
					selected: 0
				}],
				type: 'login'
			}
		},
		components:{
			'topNav':topNav,
			'myButton': button
		},
		onLoad(option) {
			this.type = option.type
		},
		created(){
			this.list = uni.getStorageSync('master_key')|| new Array(12).fill('');
			this.buttonList = uni.getStorageSync('master_key').map(item=>({value:item,
					selected: 0})).sort(() => Math.random() - 0.5);
					
		},
		methods:{
			clickFun(){
				const arr = this.list.filter(item=>item)
				if(arr.length<12){
					this.$refs.uToast.show({
						title: '请选择助记词',
						type: 'error',
					})
					return false
				}
				const params = {
					checkMasterKey: arr.join(','),
					clientId: getApp().globalData.clientid,
					account_id: uni.getStorageSync('account_id')
				}
				this.$u.post('/api/validateMasterKey', params).then(res=>{
					if(res.code==200){
						this.$refs.uToast.show({
							title: '校验成功',
							type: 'success',
						})
						if(this.type == 'login'){
							uni.setStorageSync('register',true)
							uni.navigateTo({
							    url: '/pages/property/property'
							});
						} else if(this.type=='resetPassword') {
							uni.navigateTo({
							    url: '/pages/login/resetPassword'
							});
						} else if(this.type=='privateKey') {
							uni.navigateTo({
							    url: '/pages/safe/privateKey'
							});
						}
					} else {
						this.$refs.uToast.show({
							title: '校验失败',
							type: 'error',
						})
					}
				})
			},
			selectFun(itemInfo,index){
				this.buttonList = this.buttonList.map((item,i)=>{
					if(i == index){
						item = {
							value: 'qwer',
							selected: 1
						}
					}
					return item
				})
				let flag = true
				this.list = this.list.map((item,i)=>{
					if(!item && flag){
						flag = false;
						item = itemInfo.value
					}
					return item
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp{
		padding: 0 37*2rpx;
		.title{
			font-size:24*2rpx;
			margin:30*2rpx 0 18*2rpx;
			font-size: 24*2rpx;
		}
		.content{
			display: flex;
			flex-wrap: wrap;
			background-color: #F1F1F1;
			text-align: center;
			.list{
				flex:1 0 33.33%;
				background-color: rgba(0,0,0,0.9);
				border-bottom:1rpx solid #F1F1F1;
				box-sizing: border-box;
				height:60*2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				&:not(:nth-child(3n+3)){
					border-right:1rpx solid #F1F1F1;
				}
				&.noborder{
					border-bottom:0;
					height:70*2rpx;
				}
				.info{
					flex:1;
					margin:0 20rpx;
					height:25*2rpx;
					line-height:25*2rpx;
					font-size:12*2rpx;
					background-color: rgba(255,255,255,0.1);
					border-radius: 25rpx;
				}
			}
		}
		.button-wrap{
			margin:40rpx 0 120*2rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			.list{
				height: 25*2rpx;
				width:30%;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: rgba(255,255,255,0.1);
				border-radius: 25rpx;
				margin-bottom:12*2rpx;
				&.selected{
					visibility: hidden;
				}
			}
		}
		.bottom{
			height:110*2rpx;
			background-color: #202020;
			width: 100%;
			bottom: 0;
			position: fixed;
			left:0;
		}
	}
</style>
